<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{width: 100px; height: 100px; background-color: red;position: absolute;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');

		document.onkeydown = function (ev){
			var ev = ev || event;
			switch(ev.keyCode){
				case 37:
					oDiv.style.left = oDiv.offsetLeft - 4 + 'px';
					break;
				case 38:
					oDiv.style.top = oDiv.offsetTop - 4 + 'px';
					break;
				case 39:
					oDiv.style.left = oDiv.offsetLeft + 4 + 'px';
					break;
				case 40:
					oDiv.style.top = oDiv.offsetTop + 4 + 'px';
					break;
			}
		}
	}
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>